<template lang="pug">
.good-car-type
    .fixed-bg(v-if="isShow",@click="close")
    .brand-select-list
        h3.base-line--bottom(@click="toogleBrand")
            | 全部品牌
            i(class="fa menu-btn",:class="{'fa-angle-down':!isShow,'fa-angle-up':isShow}")
        mt-cell(class="base-line--bottom",:title="item.brandName",v-for="(item,index) in brandList",:key="index",@click.native="changeBrand(item)")
            i(class="chose fa fa-check",v-if="brandId==item.brandId")
    .type-group
        h3(class="title base-line--bottom") 奥迪
        div(class="car-des",v-for="item of 15")
            p.name A1 Sportback (进口)
            p.des 发动机型号：CZD
</template>

<script>
export default {
  name: '',
  data () {
    return {
      isShow: false,
      brandId: 0,
      brandList: []
    }
  },
  components: {

  },
  watch: {

  },
  mounted () {

  },
  methods: {
    close () {
      this.isShow = false
      this.brandList = []
    },
    toogleBrand () {
      this.isShow = !this.isShow
      if (this.isShow) {
        this.getBrandList()
      } else {
        this.brandList = []
      }
    },
    changeBrand (item) {
      this.brandId = item.brandId
      this.close()
    },
    async getBrandList () {
      let obj = {'Header': {'SourceType': 19, 'UserPermit': '', 'UserTicket': '', 'SignCode': '95431727fe13d0fbf1507064dc2b4484', 'AllowOriginUrl': 'https://baolong.51cjml.com', 'ExpandInfo': '', 'AutoInfo': ''}, 'Body': '{"partItemId":"50055685","autoBrandId":0}'}
      let params = {
        data: JSON.stringify(obj)
      }
      let oList = await carAPI.getGoodsCarType(params)
      this.brandList = [{brandId: 0, brandName: '全部品牌'}, ...oList.Body.fiterBrands]
    }
  }
}
</script>

<style scoped lang="scss" >
    .fixed-bg{
        background: rgba(0,0,0,0.6);
        overflow: hidden;
        width:100%;
        height: 100%;
        z-index: 999;
        position: fixed;
        top: 200px;
        right: 0;
    }
    .brand-select-list{
        background: #fff;
        margin-top: 20px;
        z-index: 99999999;
        position: relative;
        h3{
            height: 80px;
            line-height: 80px;
            text-align: center;
            .menu-btn{
                margin-left: 10px;
            }
        }
        .chose{
            color: green
        }
    }
    .type-group
    {
        background: #fff;
        padding: 0 20px;
        h3.title{
            height: 80px;
            line-height: 80px;
            font-size: 28px;
        }
        .car-des{
            p{
                height: 60px;
                line-height: 60px;
                text-indent: 1em;
                font-size: 24px;
            }
            p.name{
                background: #e5faff;
            }
        }
    }
</style>
